import React from 'react'

import "./index.less"

import request from '../../../../utils/request'

import { Icon, Button,Toast } from "react-vant"
export default function SetRemark(props) {
    // 设置备注input value
    const [remarkValue, setRemarkValue] = React.useState(props.location.state.data.remark)

    const [msg, setMsg] = React.useState()

    React.useEffect(() => {
        setMsg(props.location.state.data)
    }, [])

    // 修改备注方法
    const setRemark = () =>{
        Toast.loading({
            message: '加载中...',
            forbidClick: true,
            onClose:() => {
                request.post("/ymz/setRemark",{obj:{remark:remarkValue,data:msg}}).then(res => {
                    let obj = msg;
                    obj.remark = remarkValue
                    props.history.push({
                        pathname:props.location.state.path,
                        state:{
                            msg:props.location.state.data,
                            path:props.location.state.oldPath
                        }
                    })
                })
            }
        });
    }
    // 返回
    const back = () => {
        props.history.push({
            pathname:props.location.state.path,
            state:{
                msg:props.location.state.data,
                path:props.location.state.oldPath
            }
        })
    }
    return (
        <div>
            <header>
                <div className='headerNavBar'>
                    <p onClick={back}>
                        <Icon name="arrow-left" size={17} />
                    </p>
                    <Button onClick={setRemark} type="primary" style={remarkValue!==props.location.state.data.remark?{background:"rgb(1,197,89)",color:"#fff"}:{backgroundColor: "rgba(0, 0, 0, .1)",color:"rgba(0, 0, 0, .1)"}}>完成</Button>
                </div>
            </header>
            <main>
                <h6 className='title'>设置标签和备注</h6>
                <div className='content'>
                    <ul>
                        <li>
                            <p style={{ paddingBottom: '5px' }}>
                                备注
                            </p>
                            <input type="text" style={{
                                border: 'none',
                                background: 'rgba(0,0,0,.1)',
                                borderRadius: '5px',
                                padding: '15px',
                                boxSizing: 'border-box',
                                width: "100%",
                                fontSize:"13px"
                            }} value={remarkValue} onChange={(e) => {
                                setRemarkValue(e.target.value);
                            }} />
                        </li>
                        <li style={{ paddingTop: '15px' }}>
                            <p style={{ paddingBottom: '5px' }}>
                                标签
                            </p>
                            <p type="text" style={{
                                background: 'rgba(0,0,0,.1)',
                                borderRadius: '5px',
                                padding: '0px 15px',
                                boxSizing: 'border-box',
                                width: "100%",
                                height: "44px",
                                display: "flex",
                                justifyContent: "space-between",
                                alignItems: "center",
                            }}>
                                <span style={{fontSize:"13px"}}>添加标签</span>
                                <span><Icon name="arrow" size={13} /></span>
                            </p>
                        </li>
                    </ul>
                </div>
            </main>
        </div>
    )
}
